Kali membahas widget appbar 

Appbar membuat heading aplikasi yg kita buat 

Selama ini satu property dari widget appbar yaitu 

Title 

Ini membutuhkan sebuah widget kita gk harus pakai text tapi bisa container( 
Height:20, color: Colors.ember 

Maka bisan 

Kta Kembali ke teks 

Title ini bis akita ke tengah defaultnya sebelah kita 

Kita ganti , 

centerTitle: true, maka dia ditengah 

kembalikan lagi 

leading: container(height: 20, color: colors.ember, 

leading sebuah seblah kiri seblum title biasanya digunakan 

tombol menu Kembali seperti side bar ada menunya 

hapus height nya tidak akan pengaruh karena leading telah memnuhi 
kasih lebar mengunakan 

leadingWidth: 100, 

ini contoh leading 


ada Namanya action: [] bentuknya arah bisa kasih banyak widget 

Text( “Action 1”), 

Text( “Action 2”), 

Maka dia sudah ada action. Action berada sebelah kanan biasa digunakan 
Untuk pemberitahuan menu pengaturan karna action bentuk array 

Karena bisa banyak widget sebelah kanan karna action ini lebih dari satu widget 


Kemudian ada 

Bottom: , 

Isi nya disorot 

Kita buat widget 

PredderedSize(preferredSize: Size.FromHeight(200)) 

Dia juga membutuhkan child 

Child: Text( “bottom” ) 

Ini untuk sebuah menambah untuk menambah dari appbar 

Child dari bottom ini bisa diganti container( 

Height: 200, color: colors.ember, width: 20) 

Ini ukuran bottom nya segini bisa di gunakan untuk tab 

Tab 1 dan tab 2 dan tab 3 

Tinggal sesuuai kan aja misalkan design aplikasi apbbar tinggi segini atau lebar nya 
atau setengah nya 

Kita bisa pakai propery bottom untuk menambah tinggi appbar nya 


Dan ada tulisan debug 

Kita bisa menghilangkan nya 

Di MeterialApp( ini ada peoperty debugShowCheckedBanner: jika true maka akan 
timbul 


Kasih false maka hilang 
Maka sekarang aplikasi debug nya sudah hilang 


Untuk propert lain bisa belajar sendiri 


Untuk satu lagi appbar ini transparent 
Kasih di appbar properynya 
backgroundColor: colors.transparent 
maka sudah hilang appbar 

agari title lebih tulisan terang kita tambhakan 
, Style: TextSytle( “color: colors.black”) 
Tapi disini backroundnya sudah hilang 
Tapi shadow nya belum hilang 

Kasih property 

Elevation: 0, 

Ini adalah appbar tanpa background 
Ini mengenai appbar 


Kali ini membahas tentang widget drawer 
Kita masih memakai file halaman Satu 
Untuk widget drawer 
Dia adanya property Scaffold 
Beralih ke widget scaffold maka ada propert Namanya 
Drawer: dia butuh widget harus widget 
Drawerl), 
Maka di aplikasi sudah timbul menu 
Kita sudah belajar leading di appbar 
Yaitu icon menu jika diklik maka muncul menu sebelah kiri 
Biasa nya untuk muncul pengaturan atau menu2 ada disini 
Ini Namanya Drawer(), ini ibaratkan halaman kosong 
Jadi di drawar kita bisa kasih apapun 
Sebelumnya kita kasih 
Child: column agar bisa dari atas ke bawah 
Di dalam column 
Children: [], 
Kasih (container 
Height: 200, 
Color: colors.amber, 
), 
Kita buka maka sudah muncul container 200 
Maka kita bebas modifikasi drawer ini anggap halaman baru 
Bisa kasih listView 
ListView( 
Children: [ 
Text(“Text 1), 


Text( “Text 2), 
Text( “Text 3), 
] 
) 
Di listview kita bungkus container( 
Kasih height: 100, 
Maka muncul 
Untuk listView dibungkus dgn container dahulu 
Kita hapus lagi 
Kasih height: 200 kita bisa manipulasi drawer ini 


Kemudian di atas bisa berikan widget LisTitle() 

ListTitle(), mempunyai jika disorot 

Kasih 

Leading: CircleAvatar(), 

Titile: Text(“Title”), 

Substitle: Text(“Subtitle”), berupa tulisan 

Ini adalah widget ListTile seperti chat list apapun yg ada icon foto dan title nya 
Bisa juga membuat banyak 


Atau kita pindahkan ListTitle ke children ListView 
Untuk height tidak bisa kasih double.infintiy 


Untuk containernya ganti Expanded 
Height nya hapus 
Jadi untuk listview bisa bungkus Expaded 


Nanti expanded dibahas tentang responsive 


Tambahkan lagi ListTile 

Atau sebelum nya sudah belajar ListView.builder( 
itemBuilder: (context, index) = > 

lalu copy ListTitle tadi 

lalu di atas kasih property 

itemCount: 10, 

ini adalah sebuah drawer kita bisa manipulasi drawer ini 


akan membahas mengenai thema 

sebelum buat aplikasih kita membutuhkan sebuah thema 

buat aplikasi banyak halaman 

tidak munkin mendesain botton satu persatu 

misal disini ada boton dihalaman pertama 

mengunakan file botton 

buat baru 

misal botton di decoration kasih warna kuning kasih style maka syle sama smua 


ini boton bisa di atur dgn mengunakan thema 

tingaal pasang warna dasar biru bisa diganti merah kuning hijau 

begitu juga appBar bisa diganti degn default 

kemudian thema bisa memganti mode nya bisa mode dark dan mode light 
disini sudah membuat codingan tengah2 boton dan dibawah nya ada text 
disini botton pada Scaffold( 

floatingActionButton: FloatingActionButton( 

onPressed: () (4), 

child: Icon(Icon.add), 

), milik dari scaffold maka sebelah kanan bawah 
floatingActionButtonlocation: bisa diganti location nya 
FlotingActionButtonLocation. Maka banyak pilihannya 

Coba ganti ke .centerFloat ini menganti location floatingAction 

Untuk membuat thema 

Tambahkan property thema di MaterialApp 

Thema: ThemeData(), maka belum jadi apa2 

Disini banyak property saya membhas sedikint bisa mengexpro lebih dalam lagi 
Pertama membahas 

Brightness: brightness.dark maka menjadi dark maka thema defaultnya light 
light untuk menganti mode kita mode gelap dan terang 

Kemudain property 

Di komen brightness 

scaffoldBackroundColor: Colors.amber //maka latar menjadi kuning 

coba brightness.dark maka tidak pengaruh dia hanya mengubah background 
dan ada lagi 

komen scaffold 

primarySwatch: Colors.amber, untuk mengubah warna dasar ini 

sebelumnya berwarna biru tapi kita ganti dgn warna amber jadi semua warna 
amber 

dari button dan appBarr 

ini mengatur warna dasar dari aplikasi 

dan ada Namanya 

komen primarySwatch 

appBarThema: AppBarThemal) ,//mengubah appbar kita mengatur default nya 
(centerTitle: true), mka dia ditengah 

Bisa ganti backround color nya 

'backroundColor: Colors.red, //maka menjadi merah 

Disini bisa kotakkatik appbar dgn thema 

Semua apbar walaupun beda halaman maka thema sepeti ini yg kita buat 
Disini banyak disini untuk appbar 

Komentar appbar 

Adalagi 

accentColor: colors.green//sudah tidak disaran dipakai tapi coba gpp 

disini hanya berubah buttonFloat 

komen 

berikutnya ada 

elevatedButtonthema: //disini bisa mengubah warna dasar kita 


dari thema membutuhkan 

elevatedbuttonThemaDatal) 

(style: ButtonStyle()) ini ada banyak 

Ubah backround color nya 

(backroundColor: MaterialStateProperty.allxColor-(value)) bukan membuthkan 
warna tapi membutuhkan MaterialStateProperty taruh color karna kita mengubah 
colorsnya 

Untuk value mengubah warna nya 

(Colors.orange) 

Maka sudah mengubah warna orange warna dasar nya 

Coba buat button lagi maka sudah menjadi orange juga 

Ini untuk mengubah sebuah button 


Berikutnya memainkan font yaitu fontFamily 
Saat ini apa kegunakaan dgn thema 


Kali membahas switch 

Sepeti apa switch adalah stop kontak bisa off dan onn 

Cth 

Membuat switch 

Buat codingan 

Body center 

Child: column( 

mainAxisAlignment: MainAxisAlignment.center, 

children: | 

text( “dark mode”), 

mengunakan widget 

Swicth() dia mempunyai 2 prameter wajib ada value dan onchanged, 
Untuk value bertipe boolean 

Sudah membuat Boolean yaitu 

Di bawah class StetexMyApp- 

Bool isDark — False: awal itu false 

Ingat kita harus mengunakan statefulwidget untuk mengubah switch nya 
Disini sudah membuat property isDark maka kita pindahkan ke value 
isDark, kemudain di onChanged (value) {})sepeti biasa mengunakan anonymous 
function 

dia mempunyai satu parameter value boleh isi apa saja 

lalu kita print {} 

print(value): 

jika dijalankan maka sudah timbul dia bisa on off 

kalau diklik belum berubah hasil masih true terus 

karna awal nya false maka diklik dia true 

kenapa karna kita print doang tidak mengubah datanya 

jadi 

isDark ini ganti dengan value 


isDark = value: 
disini masih true karna belum memakai setState 
untuk mengubah nya kita mengunakan setState 
setState(() { 
isDark = value: 
», 
Maka disni sudah berubah true dan false 
Bisa dimanffaat ini Namanya switch 
Jadi Ketika kita bernilai true maka thema akan di ganti dark 
Caranya mengunakan propert thema 
Thema : themaDatal 
Brightness: IsDark ? Brightness.dark : brightness.light 
/Ijika isdark true maka brigness.dark jika false maka light 
Ini adalah singkatan dari 
/lif (isDark)4 
Brigthness.true 
} else 4 
Brighness.light 
} 
Ini adalah singkat nya 
Jika save maka kita klik true maka jadi dark 
Ini adalah widget switch 


